import React from 'react'
import { View, TextInput, TouchableOpacity, StyleSheet, Text } from 'react-native'
import ProblemType from '../components/Correction/components/ProblemType'
import { getFeedbackType, addLineFeedback } from '../components/Correction/api/api';
import CorrectionInput from '../components/Correction/components/CorrectionInput';
import { px2dp, showToast } from 'rn-xiaobu-utils';
import flexStyle from '../configs/flex';
import fontsize from '../configs/fontsize';
import { iconDefaultColor } from '../configs/skin';
import NavigationService from '../utils/NavigationService';

export default class Correction extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      problemType: [],
      chooseType: -1,
      chooseContent: '',
      tel: '',
      content: ''
    }
    getFeedbackType().then(res=>{
      this.setState({ problemType: res })
    })
    console.log(this.props.navigation.getParam('segmentId'))
  }

  _changeProblem(id) {
    this.setState({ chooseType: id })
  }
  _changeContent(content) {
    this.setState({ content: content })
  }
  _submit() {
    if (this.state.chooseType < 0) {
      showToast('请先选择问题类型')
    } else if (this.state.content === '') {
      showToast('请输入遇到的问题')
    } else if (this.state.tel === '' || !/^1\d{10}$/.test(this.state.tel)) {
      showToast('请输入正确的手机号码')
    } else {
      addLineFeedback(this.props.navigation.getParam('segmentId'), this.state.chooseType, this.state.chooseContent, this.state.content, null, this.state.tel).then(()=>{
        showToast('提交成功')
        setTimeout(()=>{
          NavigationService.back()
        }, 500)
      })
    }
  }
  render() {
    return (
      <View style={[{ backgroundColor: '#F2F5F6', height: '100%' }]}>
        <ProblemType problemType={this.state.problemType} changeProblem={this._changeProblem.bind(this)}></ProblemType>
        <CorrectionInput changeContent={this._changeContent.bind(this)}></CorrectionInput>
        <TextInput placeholder={'请输入您的手机号码（选填）'} style={[{ minHeight: px2dp(100), marginTop: px2dp(16), paddingHorizontal: px2dp(30), backgroundColor: '#FFFFFF' }, flexStyle.flexH, flexStyle.flexVc]}
          onChangeText={(text) => this.setState({ tel: text })}
        ></TextInput>
        <TouchableOpacity style={[flexStyle.flexH, flexStyle.flexVc, flexStyle.flexHc, styles.button, this.state.chooseType > -1 ? styles.actived : styles.unActived]} onPress={()=>{
          this._submit()
        }}><Text style={[fontsize.fontsize28, { color: '#FFFFFF' }]}>提交</Text></TouchableOpacity>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  button: {
    height: px2dp(80),
    width: px2dp(690),
    marginTop: px2dp(30),
    marginLeft: px2dp(30)
  },
  actived: {
    backgroundColor: iconDefaultColor
  },
  unActived: {
    backgroundColor: '#CCCCCC'
  }
})